
<template>
    <vue-drawer-layout
    ref class="drawerLayout">
    <div class="drawer" slot="drawer">
        <div class="text">
            <p class="user">{{name}}</p>
            <ul class="drawerList">
                <li @click="modifyPassword">
                    <img src="../../assets/password.png" width="15px">
                    修改密码
                </li>
                <li @click="quit">
                    <img src="../../assets/exit.png" width="20px">
                    安全退出
            </ul>
        </div>
        <a href="javascript:void(0)" class="close" @click="handLeToggleDrawer">
            <img src="../../assets/return.png" width="18px">&nbsp;返回
            
        </a>
    </div>
    <div class="content" slot="content" ref="viewBox">
        <Hearder :title="title"></Hearder>
        <div class="section">
            <!-- <ul class="list" v-for="(item,index) in wordAttr">
                <li v-for=" (word,index) in item">
                    <div>
                        <div>
                         <span class="words">{{word.word}}</span>
                         <span class="syllable">[{{word.pronounce}}]</span>
                    </div>
                    <p class="chinese">{{word.description}}</p>
                    </div>
                </li>
            </ul> -->
        </div>
        <a href="javascrpt:void(0)" class="btn"
        @click="handleToggleDrawer">
        <img src="../../assets/menu.png" width="20px">
        </a>
    </div>
    </vue-drawer-layout>
</template>


<script>
import {setCookie, getCookie, delCookie} from '../../assets/js/cookie.js'
    import Header from "../header/header"
export default {
    name:'words',
    components:{
        Header
    },
    data(){
        return{
            upWord:{
                id:0,
                word:'',
                pronounce:'',
                description:''
            },
            words:[],
            count:0,
            page:1,
            num:null,
            name:'',
            title:"我的单词本",
            dom:'',
            wordAttr:[]
        }
    },
   mounted(){
       let uname = getCookie('userName')
       this.name = unamemo
       if (uname == ""){
           this.$router.push('/')
       }
       let_this= this;
       // 设置一个开关来避免重负请求数据
       let sw =true;
       thisa.dom =this.$refs.viewBox


       // 注册scroll事件并监听，页面是否滚动到底部
       this.dom.addEventListener('scroll', function () {
 // console.log(document.documentElement.clientHeight + '-----------' + window.innerHeight); // 可视区域高度

       if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
           //如果开关打开则加载数据
           if(sw == true){
               //将开关关闭
               sw = false;
               _this.page++
               _this.show(_this.page)
           }
       }
    });
 },
 methods:{
     //修改密码的方法
      modifyPassword: function () {
                this.$router.push({path: "/UpdatePassword"})
            },
        
        //弹出左侧菜单的方法
        handleToggleDrawer: function () {
                this.$refs.drawerLayout.toggle();
            },

            //退出当前程序
             quit() {
                this.$http.jsonp('http://app.sencha.com.cn/soya/apps/testdb/server/?action=user.logout')
                delCookie('userName')
                this.$router.push('/')
            },

            //获取数据
            show: function (page) {
                console.log(page);
                let _this = this;
                this.$http.jsonp("http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.list&perPage=10&page=" + page,
                    {//请求参数

                    }).then(function (res) {
                    _this.words = res.data.data;
                    _this.count = res.data.count;

                    _this.wordAttr.push(_this.words);

                }, function (error) {
                    //console.log(1)
                    console.log(error);
                });
            },

            //删除当前的单词信息
             del: function (id) {
                console.log(id);
                this.$http.jsonp("http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.delete&id=" + id,
                    {
                        //请求参数

                    }).then(function (res) {

                    if (res.data.ret == 0) {
                        alert("删除成功！");
                    } else {
                        alert("删除失败!");
                    }

                    this.show(1);

                }, function (error) {
                    //console.log(1)
                    console.log(error);
                });
            },
            
            //修改单词方法
            update: function (word) {

                console.log(word);

                this.$router.push({
                    /*由于动态路由也是传递params的，所以在 this.$router.push() 方法中
                     * path不能和params一起使用，否则params将无效。需要用name来指定页面。
                     * */
                    name: 'UpdWord',
                    params: {
                        word: word,
                    }
                });
            },

        },
        created() {
            this.show(1); //默认显示第一页的内容
 }
   
}
</script>

<style scoped>
.user{
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
}
.section{
    margin-top: 55px;
    margin-bottom: 40px;
}
.list li{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 3px;
    margin: 0 10px;
    padding: 12px;
    text-align: left;
    border:1px #eee solid;
    margin-top: 12px;
}
.content{
    height: 100px;
    overflow: auto;    
}
.list li .words {
        font-size: 16px;
        font-weight: bold;
        margin-right: 8px;
}

.list li .syllable {
        font-size: 12px;
        color: #666;
}

.list li .chinese {
        font-size: 12px;
        color: #666;
}

.list li .delbtn {
        border-radius: 20px;
        width: 48px;
        height: 19px;
        line-height: 16px;
        color: #41b883;
        border: 1px #41b883 solid;
        font-size: 10px;
        text-align: center;
        display: inline-block;
}

.list li .modifybtn {
        border-radius: 20px;
        width: 48px;
        height: 19px;
        line-height: 16px;
        color: #ffffff;
        border: 1px #41b883 solid;
        background: #41b883;
        font-size: 10px;
        text-align: center;
        display: inline-block;
}
.btn {
        position: fixed;
        left: 10px;
        top: 0;
        top: 12px;
        z-index: 2;
}

.btngroud {
        flex: 0 0 100px;
}
.drawerList li{
    display: flex;
    align-items: center;
    margin-left: 20px;
    line-height: 45px;
}
.drawerList li img{
    margin-right:10px;
}
.button{
    background: none;
}
.close {
        position: fixed;
        bottom: 10px;
        right: 35%;
        color: #41b883;
        text-decoration: none;
        font-size: 14px;
        align-items: center;
        display: flex;
        font-weight: bold;

}
.h1, h2{
    font-weight: normal;
    text-align: center;
}
ul li{
    list-style:none;
}
.drawer{
    height: 100%;
}
 .text {
        width: 70%;
        height: 100%;
        background-color: #ffffff;
        box-shadow: 3px 3px 6px 6px #888888;
        font-family: 微软雅黑;
        font-size: 2.1vh;
}
.button{
    display: flex;
    flex-direction: row;
    padding-left: 50%;
    padding-top: 2%;
}
</style>